<template>
    <div>
        <div class="itembox">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <span class="itemname">{{itemname}}</span>
                        <span style="display:inline-block;margin-left:20px;width:180px;margin-top: 10px;">
            <lar-field-select v-model="remoteMSelect" :fieldMulti="ifall" action="search"
                              :fieldLink="selectLink"></lar-field-select>
        </span>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <div class="grid-content bg-purple itmeborder">
                        <span>可提现的余额</span>
                        <p class="pricebox">
                            <span class="payicon">¥ </span>
                            <span class="pricenum">{{pricelist.balance}}</span>
                        </p>
                        <p style="margin-top:8px">
                            <el-button size="mini" @click="payMoney">充值</el-button>
                            <el-button size="mini">提现</el-button>
                        </p>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light itmeborder">
                        <span>推广费账户</span>
                        <p class="pricebox">
                            <span class="payicon">¥ </span>
                            <!--<span class="pricenum">{{pricelist.red_balance}}</span>-->
                            <span class="pricenum">0</span>
                        </p>

                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple itmeborder">
                        <span>已消费金额</span>
                        <p class="pricebox">
                            <span class="payicon">¥ </span>
                            <span class="pricenum">{{pricelist.cost}}</span>
                        </p>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light itmeborder clearline">
                        <span>已提现余额</span>
                        <p class="pricebox">
                            <span class="payicon">¥ </span>
                            <span class="pricenum">{{pricelist.get_cash}}</span>
                        </p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="pricetabs">
            <lar-ui-plane>
                <el-tabs v-model="activeName" @tab-click="handleClick" class="bgtabs">
                    <el-tab-pane
                            v-for="(item,index) in navList"
                            :label="item.name" :name="item.type"
                            :key="index">
                    </el-tab-pane>
                </el-tabs>
                <lar-table model="money.record" canAdd="canAdd"></lar-table>
            </lar-ui-plane>
        </div>
    </div>
</template>
<script>
    import {
        Row,
        Col,
        Select,
        Tabs,
        TabPane,
        Autocomplete,
        Button,
        Option
    } from "element-ui";

    export default {
        name: "property",
        data() {
            return {
                current: "",
                navList: [
                    {type: "all", name: "全部流水"},
                    {type: "cost", name: "消费记录"},
                    {type: "recharge", name: "充值记录"},
                    {type: "refund", name: "退款记录"}
                ],
                activeName: "all",
                restaurants: [],
                state4: "",
                pricelist: {},
                timeout: null,
                itemname: "用户:",
                id: "",
                selectLink: {
                    url: "/common/user/",
                    select: ["id", "name", "phone"]
                },
                remoteMSelect: {},
                ifall: false
            };
        },
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Tabs.name]: Tabs,
            [TabPane.name]: TabPane,
            [Autocomplete.name]: Autocomplete,
            [Button.name]: Button,
            [Select.name]: Select,
            [Option.name]: Option
        },
        created() {
            this.getUserPrice();
        },
        mounted() {
        },
        watch: {
            remoteMSelect: function (remoteMSelect) {
                this.id = this.remoteMSelect
                console.log(remoteMSelect)
                this.getUserPrice()
            },
            activeName: function (newValue) {
                let data = {
                    moneyType: {
                        value: newValue,
                        searchModel: "equal"
                    }
                };
                this.$store.commit('pipe', {'value': data, 'name': 'money.record.table'});
            }
        },
        methods: {
            payMoney() {
                this.$router.push({path: '/dialog/edit/money.record'});
            }, // 充值
            handleClick(tab, event) {
                console.log(tab, event);
            },
            getUserPrice() {
                this.$http
                    .get("/money/record/flow/", {
                        params: {
                            user_id: this.id
                        }
                    })
                    .then(res => {
                        this.pricelist = res.data.data;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },

            querySearchAsync(queryString, cb) {
                console.log(queryString);
                this.$http
                    .get("/common/user/", "")
                    .then(res => {
                        let list = [
                            {
                                label: "所有用户"
                            }
                        ];
                        for (let i = 0; i < res.data.data.length; i++) {
                            let ob = {
                                label: res.data.data[i].name,
                                phone: res.data.data[i].phone,
                                id: res.data.data[i].id
                            };
                            list.push(ob);
                        }

                        cb(list);
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            handleSelect(item) {
                console.log(item);
                this.id = item.id;
                this.itemname = item.value;
                this.getUserPrice();
            }
        }
    };
</script>
<style lang="less">
    .pricetabs .el-tabs__nav {
        margin-left: 20px !important;
        height: 50px;
        line-height: 50px;
    }

    .pricetabs .lar-table {
        padding-top: 0;
        /*padding-left: 40px;*/
    }

    .pricetabs .el-tabs__item:hover {
        color: #409eff;
    }

    .pricetabs .el-tabs__item {
        width: 100px;
        text-align: center;
    }
</style>

<style lang="less" scoped>
    .grid-content {
        background: #fff;
    }

    .bgtabs {
        background: #fff;
    }

    .itembox {
        margin: 10px 10px 0;
        height: 200px;
        background: #fff;
        .changeuser {
            margin-left: 20px;
            width: 150px;
            margin-top: 10px;
        }
        .itemname {
            font-size: 16px;
            font-weight: 600;
            margin-left: 20px;
        }
        .itmeborder {
            border-right: 2px solid rgb(232, 231, 231);
            height: 100px;
            padding: 0 0 0 40px;
            margin-top: 13px;
            .pricebox {
                margin-top: 6px;
                .payicon {
                    font-size: 23px;
                    margin-left: 5px;
                }
                .pricenum {
                    font-size: 35px;
                }
            }
        }
        .clearline {
            border-right: none;
        }
    }

    @media screen and (max-width: 1150px) {
        .itembox {
            .itmeborder {
                /*border-right: 2px solid rgb(232, 231, 231);*/
                /*height: 100px;*/
                padding: 0 0 0 20px;
                /*margin-top: 13px;*/
                .pricebox {
                    margin-top: 6px;
                    .payicon {
                        font-size: 20px;
                        margin-left: 5px;
                    }
                    .pricenum {
                        font-size: 26px;
                    }
                }
            }
        }
    }
</style>

